<style>
    .layui-input, .layui-textarea {
        display: block;
        width: 85%;
        padding-left: 10px;
    }

    .layui-form-label.required:before { /* 这种写法也可以*/
        content: ' *';
        color: red;
    }

    .layui-form-label {
        float: left;
        display: block;
        padding: 9px 15px;
        width: 113px;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }

    .layui-form-select dl {
        left: 33px;
        min-width: 85%;
    }
</style>


<script type="text/html" id="viewAttachmentHtml">
    <div id="example1" style="height: 100%;"></div>
</script>

<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>
<!-- 表单弹窗 -->
<form lay-filter="productReviewForm" class="layui-form model-form">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>开工单信息</legend>
    </fieldset>
    <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
            <label class="layui-form-label required">选择开工单：</label>
            <div class="layui-input-block">
                <select id="workOrderId" lay-search="" name="workOrderId" lay-filter="workOrderId"
                        class="common-select-search">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">排产工序：</label>
            <div class="layui-input-block">
                <input id="processName" name="processName" placeholder="排产工序" type="text" class="layui-input"
                       required autocomplete="off"/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">所属设备：</label>
            <div class="layui-input-block">
                <input id="deviceName" name="deviceName" placeholder="所属设备" type="text" class="layui-input"
                       required autocomplete="off"/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">所属生产计划：</label>
            <div class="layui-input-block">
                <input id="productPlanName" name="productPlanName" placeholder="所属生产计划" type="text"
                       class="layui-input"
                       required autocomplete="off"/>
                <input id="productPlanId" type="hidden" name="productPlanId">
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
            <label class="layui-form-label">产品类型：</label>
            <div class="layui-input-block">
                <input id="cusProductType" name="cusProductType" placeholder="产品类型" type="text" class="layui-input"
                       lay-verify="required"
                       required autocomplete="off"/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">内部SKU料号：</label>
            <div class="layui-input-block">
                <input id="skuCode" name="skuCode" placeholder="内部SKU料号" type="text" class="layui-input"
                       required autocomplete="off"/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">内部SKU名称：</label>
            <div class="layui-input-block">
                <input id="skuName" name="skuName" placeholder="内部SKU料号" type="text" class="layui-input"
                        required autocomplete="off"/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">内部规格码：</label>
            <div class="layui-input-block">
                <input id="skuSpec" name="skuSpec" placeholder="内部规格码" type="text" class="layui-input"
                       required autocomplete="off"/>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
            <label class="layui-form-label">单位：</label>
            <div class="layui-input-block">
                <input type="text" id="unit" name="unit" class="layui-input"
                       placeholder="单位">
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">附件：</label>
            <div class="layui-input-block">
                <div id="addHeaderPdf" class="companyFormPhotos"></div>
                <input name="attachmentPdf" id="attachmentPdf" type="hidden" class="layui-input"
                       lay-verify="attachmentPdf"/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label required">检验工单分类：</label>
            <div class="layui-input-block">
                <select id="classify" name="classify" class="common-select-search"
                        lay-verify="required"/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label required">送检类型：</label>
            <div class="layui-input-block">
                <select id="type" name="type" class="common-select-search"
                        lay-verify="required"/>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
            <label class="layui-form-label required">送检数量：</label>
            <div class="layui-input-block">
                <input type="text" id="quantity" name="quantity" class="layui-input"
                       placeholder="送检数量">
            </div>
        </div>
        <div class="layui-col-md6">
            <label class="layui-form-label">送检备注说明</label>
            <div class="layui-input-block">
                <textarea id="remark" name="remark" placeholder="请输入送检备注" class="layui-textarea"/>
            </div>
        </div>
    </div>
    <div class="layui-form-item text-right">
        <button class="layui-btn" lay-filter="productQualityTaskFormSubmit" lay-submit>保存</button>
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
    </div>
</form>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'laydate', 'admin', 'laytpl', 'upload', 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var config = layui.config;
        var table = layui.table;
        var admin = layui.admin;
        var form = layui.form;

        //数据
        let tempData = admin.getTempData("qualityTaskData");

        //检验工单分类
        admin.getDictList("classify", "product_quality_classify", tempData.classify, "检验工单分类");

        //送检类型
        admin.getDictList("type", "product_quality_type", tempData.type, "送检类型");


        //加载变为不可以输入
        document.getElementById("processName").disabled = true//显示
        document.getElementById("deviceName").disabled = true;//显示
        document.getElementById("productPlanName").disabled = true;//显示
        document.getElementById("cusProductType").disabled = true;//显示
        document.getElementById("skuCode").disabled = true;//显示
        document.getElementById("skuName").disabled = true;//显示
        document.getElementById("skuSpec").disabled = true;//显示
        document.getElementById("unit").disabled = true;//显示

        if (tempData) {
            $("#remark").val(tempData.remark);
            $("#quantity").val(tempData.quantity);
            form.render('select');
        }

        admin.req('production/productionPlan/admin/productionWorkOrder/list', {limit: 9999}, function (res) {
            if (res.code == 200) {
                if (res.data.length > 0) {
                    $.each(res.data, function (index, item) {
                        $("#workOrderId").append(new Option(item.code, item.id));
                    })
                    $("#workOrderId").val(tempData.workOrderId);
                    form.render('select');
                    if (tempData.workOrderId) {
                        admin.req('production/productionPlan/admin/productionWorkOrder/getWorkOrderDetails', {workOrderId: tempData.workOrderId}, function (res) {
                            if (res.code == 200) {
                                $("#processName").val(res.data.processName);
                                $("#deviceName").val(res.data.deviceCode);
                                $("#productPlanName").val(res.data.planCode);
                                $("#productPlanId").val(res.data.productionPlanId);
                                $("#cusProductType").val(res.data.productTypeName);
                                $("#skuCode").val(res.data.skuCode);
                                $("#skuName").val(res.data.skuName);
                                $("#skuSpec").val(res.data.skuSpec);
                                $("#unit").val(res.data.unitName);
                                //图片相关
                                $('#addHeaderPdf').html('<div class="attachments">' +
                                    '<div><img name="attachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png"></div></div>');
                                $('#attachmentPdf').val(res.data.accessory);

                                $(".attachments").click(function () {
                                    let json = {};
                                    json.attachment = res.data.accessory;
                                    showViewAttachmentModel(json);
                                })
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        })
                    }
                }
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        }, 'GET');

        //开工单的选择事件
        form.on('select(workOrderId)', function (data) {
            let value = data.value;
            //根据开工单查询出一系列信息
            admin.req('production/productionPlan/admin/productionWorkOrder/getWorkOrderDetails', {workOrderId: value}, function (res) {
                if (res.code == 200) {
                    $("#processName").val(res.data.processName);
                    $("#deviceName").val(res.data.deviceCode);
                    $("#productPlanName").val(res.data.planCode);
                    $("#productPlanId").val(res.data.productionPlanId);
                    $("#cusProductType").val(res.data.productTypeName);
                    $("#skuCode").val(res.data.skuCode);
                    $("#skuName").val(res.data.skuName);
                    $("#skuSpec").val(res.data.skuSpec);
                    $("#unit").val(res.data.unitName);
                    //图片相关
                    $('#addHeaderPdf').html('<div class="attachments">' +
                        '<div><img name="attachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png"></div></div>');
                    $('#attachmentPdf').val(res.data.accessory);

                    $(".attachments").click(function () {
                        let json = {};
                        json.attachment = res.data.accessory;
                        showViewAttachmentModel(json);
                    })
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            })
        })

        function showViewAttachmentModel(data){
            admin.open({
                type: 1,
                area: ['60%', '80%'],
                offset: '65px',
                title: '查看附件',
                content: $('#viewAttachmentHtml').html(),
                success: function () {
                    if (data.attachment && data.attachment.indexOf(".pdf") !== -1) {
                        PDFObject.embed(data.attachment, "#example1");
                    } else {
                        var attachmentHtml = "";
                        data.attachment.split(",").forEach((attachmentUrl, index) => {
                            attachmentHtml += '<div><div><img src="' + attachmentUrl + '"></div></div>';
                        });
                        $('#example1').html(attachmentHtml);
                    }
                }
            })
        }

        //表单提交事件
        form.on('submit(productQualityTaskFormSubmit)', function (d) {
            layer.load(2);
            d.field.id = tempData.id;
            admin.req('production/quality/admin/firstTask/update', d.field, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('proQualityTaskTableInfo');
                    layer.closeAll('page');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'POST');
            return false;
        });
    });
</script>